<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // 删除tr的响应函数
      function delA() {
        // 点击超链接以后删除超链接所在那行
        // 这里我们点击哪个超链接this就是谁
        var tr = this.parentNode.parentNode;

        // 获取删除员工的名字
        var name = tr.getElementsByTagName("td")[0].innerHTML;

        // 删除之前弹出提示框

        /**
             *confirm用于弹出一个带有确认和取消按钮的提示框
             如果用户点击确认则返回true，取消则false
             */
        var flag = confirm("确认删除" + name + "?");
        // 如果用户点击确认
        if (flag) {
          tr.parentNode.removeChild(tr);
        }

        /**
         * 点击超链接，超链接默认跳转页面
         *  取消默认行为，可以通过在响应函数的最后return false来取消
         *
         */
        // return false;
      }
      window.onload = function () {
        /**
         * 点击超链接删除一个员工信息
         */
        // 获取所有超链接
        var allA = document.getElementsByTagName("a");

        for (var i = 0; i < allA.length; i++) {
          allA[i].onclick = delA;
        }
        /**
         * 添加员工的功能
         *   点击按钮以后，将员工的信息添加到表格里
         */
        var addEmpButton = document.getElementById("addEmpButton");
        addEmpButton.onclick = function () {
          // 获取添加员工的信息

          var name = document.getElementById("empName").value;
          var email = document.getElementById("email").value;
          var salary = document.getElementById("salary").value;

          /**
         * <tr>
        <td>tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>

      需要将获取的信息保存到tr中
         */

          var tr = document.createElement("tr");
          // 创建四个td
          var nameTd = document.createElement("td");
          var emailTd = document.createElement("td");
          var salaryTd = document.createElement("td");
          var aTd = document.createElement("td");

          var a = document.createElement("a");
          // 创建文本节点
          var nameText = document.createTextNode(name);
          var emailText = document.createTextNode(email);
          var salaryText = document.createTextNode(salary);
          var delText = document.createTextNode("Delete");

          // 将文本条件到td中
          nameTd.appendChild(nameText);
          emailTd.appendChild(emailText);
          salaryTd.appendChild(salaryText);

          // 向a中添加文本
          a.appendChild(delText);
          // 将a添加到td中
          aTd.appendChild(a);

          // 将td添加到tr中
          tr.appendChild(nameTd);
          tr.appendChild(emailTd);
          tr.appendChild(salaryTd);
          tr.appendChild(aTd);

          // 向a添加href属性
          a.href = "javascript:;";

          // 为新加的a绑定一次单击响应函数
          a.onclick = delA;
          // 获取table
          var employeeTable = document.getElementById("employeeTable");
          // 获取employeeTable 中的body
          var tbody = employeeTable.getElementsByTagName("tbody")[0];

          employeeTable.appendChild(tr);
        };
      };
    </script>
  </head>
  <body>
    <table id="employeeTable">
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salar</th>
        <th>&nbsp;</th>
      </tr>
      <tr>
        <td>tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
      <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>5000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="javascript:;">Delete</a></td>
      </tr>
    </table>
    <div id="formDiv">
      <h4>添加员工</h4>
      <table>
        <tr>
          <td class="word">name:</td>
          <td class="inp">
            <input type="text" name="empName" id="empName" />
          </td>
        </tr>
        <tr>
          <td class="word">email:</td>
          <td class="inp">
            <input type="text" name="email" id="email" />
          </td>
        </tr>
        <tr>
          <td class="word">salary:</td>
          <td class="inp">
            <input type="text" name="salary" id="salary" />
          </td>
        </tr>
        <tr>
          <td colspan="2" allign="center">
            <button id="addEmpButton" value="abc">submit</button>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
